<template>
    <div class="search-rd">
        <div class="search-header">
            <div class="search_form">
                <a class="search_back" @click="back"><i></i></a>
                <div class="search_input">
                   <i class="search_icon"></i>
                    <input type="search" v-model.trim="query" autofocus="autofocus" placeholder="输入搜索关键字" name="keyWord" id="keyWord" ref="queryInput" @click="isSearching = true">
                </div>
                <a href="javascript:;" @click="searchSubmit">搜索</a>
            </div>
            <div class="js-menu-main-wrap box-row">
                <div data-contro_option="option-item_region" class="js-menu-item flex-1 menu-region" :class="{'open': selType=='pstatus'}" @click="selCheck('pstatus')">{{s_state_text}} <i class="js-menu-item-triangle"></i></div>
                <div data-contro_option="option-item_price" class="js-menu-item flex-1 menu-price" :class="{'open': selType=='cate_id'}"  @click="selCheck('cate_id')">{{s_cate_text}} <i class="js-menu-item-triangle"></i></div>
                <div class="js-menu-item flex-1 menu-housetype" :class="{'open': selType=='dealtype'}"  @click="selCheck('dealtype')">{{s_deal_ctype_text}} <i class="js-menu-item-triangle"></i></div>
            </div>
            <div class="js-menu-option-wrap" :class="{'opacity-0': !openSel}">
                <div class="js-menu-option-content" :style="{height: wH}">
                    <div class="js-menu-option-item fn_ul" v-show="selType=='pstatus'">
                        <div class="fn_li" v-for="(item,index) in state_res" @click="clickSel('state',item.id,item.name)">{{item.name}}</div>
                    </div>
                    <div class="js-menu-option-item fn_ul" v-show="selType=='cate_id'">
                        <div class="fn_li" v-for="(item,index) in cate_res" @click="clickSel('cate_id',item.id,item.name)">{{item.name}}</div>
                    </div>
                    <div class="js-menu-option-item fn_ul" v-show="selType=='dealtype'">
                        <div class="fn_li" v-for="(item,index) in dealtype_res" @click="clickSel('dealtype',item.id,item.name)">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="prod-conditions" v-if="!isSearching">
            
        </div>
        <div class="searchTagBox" v-show="isSearching">
            <div class="searchHistory tagList" v-show="hasHistory">
                <div class="searchTop">
                    <span>搜索历史</span>
                    <i class="trash" @click="removeHistory"></i>
                </div>
                <ul>
                    <li class="searchTag" v-for="tag in localHistory" v-text="tag" @click="tagSearch(tag.name)"></li>
                </ul>
            </div>
            <div class="hotSearch tagList">
                <div class="searchTop">
                    <span>热搜</span>
                </div>
                <ul>
                    <li class="searchTag" v-for="tag in moreData" v-text="tag.name" @click="tagSearch(tag.name)"></li>
                </ul>
            </div>
        </div>
        <div class="plist" v-show="!isSearching">
            <div class="wrapper" ref="wrapper">
                <div v-show="projectData.length > 0">
                    <div class="top-tip">
                        <span class="refresh-hook" v-html="pulldownMsg"></span>
                    </div>
                    <ul class="content project-wrap">
                        <li class="project-item" v-for="(item,index) in projectData">
                            <router-link :to="{path:'/productDetail',query:{id:item.id}}">
                                <div class="d-project-header clearfix">
                                    <div class="initiator">
                                        <img :src=" item.avatar ? 'http://zc.wzgaolaozhuang.com/'+item.avatar : defaultAvatar" class="initiator-avatar" alt="">
                                        <span class="initiator-name">{{item.user_name}}</span>
                                    </div>
                                    <div class="pj-status appointment">
                                        <i class="icon icon-appointment"></i>
                                        <span class="text-appointment">{{item.type == 1 ? statusHandle(item.begin_time,item.now_time,item.end_time,item.type,item.is_success) : statusHandle2(item.status,item.percent)}}</span>
                                    </div>
                                </div>
                                <div class="d-project-content">
                                    <div class="project-img">
                                        <img :src="'http://zc.wzgaolaozhuang.com/'+item.image" alt="">
                                        <div class="img-intro slh">
                                             {{item.brief}}
                                        </div>
                                    </div>
                                    <div class="project-data">
                                        <div class="d-project-content-title">
                                            {{item.name}}
                                        </div>
                                        <div class="d-project-content-type">
                                            <span class="sort-item">
                                                <i class="icon icon-build"></i>{{item.cate_name}}
                                            </span>
                                            <span class="sort-item">
                                                <i class="icon icon-address"></i>{{item.province}}-{{item.city}}
                                            </span>
                                        </div>
                                        <div class="progress">
                                            <div class="box-row">
                                                <div class="time flex-1">剩余时间: {{item.remain_days}}</div>
                                                <div class="percent flex-1 left-1px">预约进度: {{item.percent}}%</div>
                                            </div>
                                            <div class="weui-progress">
                                                <div class="weui-progress__bar">
                                                    <div class="weui-progress__inner-bar" :style="{width: item.percent > 100 ? '100%' : item.percent + '%'}"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                    <div class="bottom-tip">
                        <span class="loading-hook">{{pullupMsg}}</span>
                    </div>
                </div>
                <div class="project-item" v-show="projectData.length <= 0">
                        <div class="d-project-content pt20">
                            <div class="project-img">
                                <img src="~__assets/images/preview.jpg" alt="">
                            </div>
                            <div class="project-data">
                                <div class="d-project-content-title">
                                    暂无产品
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        
    </div>
</template>
<style scoped lang="scss">
    .search-rd{
        background-color: rgb(248,248,248);

        .prod-conditions{
            position: fixed;
            top:0;
            left:0;
            height:55px;
            padding: 10px 0;
            overflow: hidden;
        }
        .search-header{
            position: fixed;
            top:0;
            left:0;
            width: 100%;
            z-index: 990;
        }
        .search_form {
            height:55px;
            padding: 10px 0;
            overflow: hidden;
            background-color: #ffffff;
            z-index: 997;
            .search_back{
                display: inline-block;
                width:10%;
                padding-top: 5px;
                i{
                    display: inline-block;
                    width:20px;
                    height:20px;
                    background: url(~__assets/images/icon/search-back.png) no-repeat;
                    background-size: 100% 100%;
                }
            }

            .search_input {
                position: relative;
                float: left;
                width: 74%;

                .search_icon{
                    position: absolute;
                    left: 10px;
                    top: 10px;
                    width: 15px;
                    height: 15px;
                    display: inline-block;
                    background: url('~__assets/images/icon/search1.png') no-repeat;
                    background-size: 100% 100%;
                }
            }

            input[type=search] {
                font-size: 14px;
                width:100%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                height: 35px;
                /*text-align: center;*/
                padding-left: 35px;
                border: 0;
                border-radius: 4px;
                background-color: #fff;
            }
        }

        .search_form a {
            font-size: 14px;
            width: 16%;
            float: left;
            height:35px;
            line-height: 35px;
            text-align: center;
            color: #000;
        }

        .searchTagBox{
            margin-top: 100px;
            padding-bottom:20px;

            .searchTag{
                float:left;
                height: 24px;
                line-height: 24px;
                padding-left: 13px;
                padding-right: 13px;
                border-radius: 3px;
                margin-right: 5px;
                margin-top:5px;
                background-color: #f0f2f5;
                color: #686868;
            }

            .tagList{
                overflow: hidden;
                padding:10px;
            }

            .searchTop{
                position: relative;
                height:20px;
            }
            .trash{
                position: absolute;
                background: url('~__assets/images/icon/trash.png') no-repeat;
                background-size: 100% 100%;
                display: inline-block;
                right:10px;
                width:18px;
                height:18px;
            }

            .searchResultBox .tab_nav{
                height:40px;
                /*line-height: 40px;*/
                background-color: #fff;
            }
        }
        .prod_box{overflow: hidden;}
        .wrapper{height:100%;}
    }
    .js-menu-main-wrap{
        height: 44px;
        line-height: 44px;
        background-color: #ffffff;

        .js-menu-item{
            text-align: center;
            font-size: 14px;

            .js-menu-item-triangle{
                @include triangle(5px,bottom);
                margin-left: 3px;
                transition: all .5s;
                -moz-transition: all .5s; 
                -webkit-transition: all .5s;
                transform-origin:50% 50%;
                -ms-transform-origin:50% 50%; 
                -moz-transform-origin:50% 50%; 
                -webkit-transform-origin:50% 50%;
                vertical-align: -3px;
            }
            &.open{
                color: $activeColor;
                .js-menu-item-triangle{
                    vertical-align: 3px;
                    transform: rotate(180deg);
                    -webkit-transform: rotate(180deg);
                }
            }
        }
    }

    .js-menu-option-wrap{
        background: #fff;
        transition: all .3s ease-out;
        position: fixed;
        left: 0;
        bottom: 0;
        top: 99px;
        width: 100%;
        background: rgba(0, 0, 0, .5);
        z-index: 9990;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;

        .js-menu-option-content{
            background-color: #ffffff;
            position: relative;
            transition: all .3s ease-out;
            overflow-x: hidden;
            overflow-y: auto;
            height: 0;
            padding-left: a(40px);
            .js-menu-option-item{
                &.active{
                    display: block;
                }
            }
        }
    }
        
    .opacity-0{
        opacity: 0;
        visibility: hidden;
    }
    .plist{
        position: absolute;
        left: 0;
        top: 100px;
        bottom: 40px;
        width: 100%;
        .wrapper{
            height: 100%;
        }
    }
    .project-item{
        background-color: #ffffff;
        padding: 0 a(30px);
        margin-top: a(20px);
        &:first-child{
            margin-top: 5px;
        }
        .initiator{
            float: left;
            @include lh(a(112px));
            .initiator-avatar{
                display: inline-block;
                width: a(50px);
                height: a(50px);
                border-radius: 50%;
            }
            .initiator-name{
                font-size: 12px;
                display: inline-block;
                margin-left: a(20px);
            }
        }
        .pj-status{
            float: right;
            @include lh(a(112px));

            &.appointment{
                .text-appointment{
                    font-size: $f24;
                    color: #02D560;
                    display: inline-block;
                }
                .icon-appointment{
                    display: inline-block;
                    vertical-align: a(-4px);
                    @include bg("~__assets/images/icon/iconfont-appiontment.png",a(26px),a(27px));
                }
            }
            &.subscription{
                color: #0f2dcd;
            }
        }
        .d-project-content{
            margin: 0 auto;
            .project-img{
                position: relative;
                width: 100%;
                height: a(400px);
                img{
                    width: 100%;
                    height: 100%;
                }
                .img-intro{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: a(90px);
                    background-image: linear-gradient(-180deg,rgba(0,0,0,0) 0,rgba(102,102,102,.7) 100%);
                    font-size: 14px;
                    color:#ffffff;
                    padding: a(30px) a(20px) 0;
                }
            }
        }
        .d-project-content-title{
            font-size: 18px;
            padding: a(30px) a(20px);
        }
        @media screen and (max-width:413px) and (min-width:359px) {
          .d-project-content .d-project-content-type .sort-item {
            padding-right: 18% !important
          }

          .d-project-content .d-project-content-type .sort-item:last-child {
            padding-right: 0 !important
          }
        }

        @media screen and (min-width:413px) {
          .d-project-content .d-project-content-type .sort-item {
            padding-right: 20% !important
          }

          .d-project-content .d-project-content-type .sort-item:last-child {
            padding-right: 0 !important
          }
        }
        .sort-item{
            font-size: 12px;
            .icon{margin-right: 10px;vertical-align: -1px;}
        }
        .d-project-content-type{
            padding: 0 a(20px) a(26px);
            color: #666;
        }
        .icon-build{
            @include bg("~__assets/images/icon/iconfont-build-1.png",10px,14px);
        }
        .icon-address{
            @include bg("~__assets/images/icon/iconfont-address-1.png",8px,14px);
        }
        .progress{
            padding-bottom: a(30px);
            .time{
                text-align: left;
                padding-left: a(20px);
                font-size: 10px;
                color: rgb(89, 89, 89);
            }
            .percent{
                text-align: right;
                padding-right: a(20px);
                font-size: 10px;
                color: rgb(2, 213, 96);
            }
            .weui-progress{
                margin-top: a(20px);
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;

                .weui-progress__bar {
                    border-radius: a(3px);
                    height: 3px!important;
                    background-color: #ebebeb;
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                }
                .weui-progress__inner-bar {
                    border-radius: a(3px);
                    width: 0;
                    height: 100%;
                    background: linear-gradient(left top,#00FF00,#02D560);
                    background: -webkit-linear-gradient(left top,#00FF00,#02D560);
                    background: -moz-linear-gradient(left top,#00FF00,#02D560);
                }
            }
        }
    }
    .top-tip{
        position: absolute;  
        top: -40px;  
        left: 0;
        z-index: 1;  
        width: 100%;  
        height:40px;  
        line-height:40px;  
        text-align:center;
        color: #555;
    } 
      
    .bottom-tip{
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #777;
        background: #f2f2f2;
        position: absolute;
        bottom: -35px;
        left: 0;
    }
</style>
<script>
    import mySpinner from '__cp/mySpinner';
    import Bscroll from 'better-scroll';
    import {getIndexList,getCateList} from '__api';
    import defaultAvatar from '__assets/images/avatar.png';
    export default{
        name:'search-view',
        // props:['moreProduct'],
        components:{scroll,mySpinner},
        data(){
            return{
                defaultAvatar:defaultAvatar,
                wH: 0,
                openSel: false,
                selType: '',
                cate_res:[{id:'',name:'全部空间'}],
                state_res:[{id:'',name:'全部状态'}],
                dealtype_res:[{id:'',name:'全部类型'}],
                s_state:'',
                s_state_text:'项目状态',
                s_cate:'',
                s_cate_text:'空间类型',
                s_deal_ctype:'',
                s_deal_ctype_text:'投资类型',
                page:1,
                query:'',
                localHistory:[],
                hasHistory:false,
                isSearching:true,
                moreProductAllLoad:false,
                count:0,
                currntIndex:1,
                allLoad: true,
                listInitStatus: true,
                pulldownMsg: '下拉刷新',
                pulldownStatus: false,
                pullupMsg: '上拉加载更多',
                projectData: [],
                moreData:[
                    {name:"北京"},
                    {name:"温州"},
                    {name:"上海"},
                ]
            }
        },
        created(){
            let that = this;
            this.$nextTick(() => {
                this.wH = window.innerHeight * 0.65 + 'px';
                this.getCate();
                if (!this.scroll) {
                  this.scroll = new Bscroll(this.$refs.wrapper, {
                        probeType:1,
                        click: true,
                        pullDownRefresh: {
                          threshold: 60,
                          stop: 40
                        },
                        pullUpLoad: {
                          threshold: -30, // 当上拉距离超过30px时触发 pullingUp 事件
                          stop: 40
                        }
                  })
                  this.scroll.on('scroll',(pos)=>{
                        if(pos.y > 50){
                            this.pulldownStatus = true;
                        }
                    });
                  this.scroll.on('touchEnd', (pos) => {
                    if(pos.y > 50){
                        that.pulldownMsg = "<span class='logo-span'><span class='f'>F</span><span class='u'>U</span><span class='n'>N</span><span class='s'>S</span></span> 加载中...";
                        that.page = 1;
                        that.allLoad = false;
                        that.getData(true,true)
                    }
                    else if(pos.y<(that.scroll.maxScrollY - 30)){   //下拉加载
                        if(!that.allLoad){
                            that.page++;
                            that.pullupMsg = '加载中...';
                            that.getData(false,false)
                        }
                    }
                  })
                } else {
                  this.scroll.refresh()
                }
                this.preQuery = this.$route.query;
                if(this.preQuery.type == 'xf'){
                    this.s_deal_ctype = 3;
                    this.getData(true,true);
                    this.isSearching = false;
                }
            })
        },
        watch:{
            currntIndex(){
                //this.getMoreData()
            }
        },
        methods:{
            selCheck(params){
                if(this.selType == params){
                    this.selType = '';
                    this.openSel = false;
                } else {
                    this.selType = params;
                    this.openSel = true;
                }
            },
            searchSubmit(){
                // if(this.$refs.queryInput.value == ''){
                //     this.mytoast('关键字不能为空!')
                //     return 
                // }
                this.page = 1;
                let hadKeyWord = false;
                this.localHistory.forEach((obj,index)=>{
                    if(this.$refs.queryInput.value == obj){
                        hadKeyWord = true;
                    }
                });

                if(!hadKeyWord){
                    this.localHistory.push(this.$refs.queryInput.value)
                    localStorage.setItem('productQueryHistory',JSON.stringify(this.localHistory));
                }
                
                this.getLocalHistory();
                this.getData(true,true)
                this.isSearching = false;
            },
            getData(clearData,isPullDown){
                if(clearData){
                    this.allLoad = false;
                    this.pullupMsg = '上拉加载更多'
                }
                this.$loading({nozz:true,small:true});
                getIndexList({
                    url: '/wap/index.php?ctl=deals&tpl=1&state='+this.s_state+'&cate_id='+this.s_cate+'&deal_ctype='+this.s_deal_ctype+'&k='+this.$refs.queryInput.value+'&p='+this.page,
                }).then( res => {
                    //刷新数据
                    if(clearData){
                        this.projectData = [];
                    }
                    this.projectData = this.projectData.concat(res.deal_list);
                    if(res.deal_list.length < res.pages[0]){
                        this.allLoad = true;
                        this.pullupMsg = '已全部加载'
                    }
                    
                    this.listInitStatus = true;

                    if(isPullDown){
                        setTimeout(()=>{
                            this.pulldownMsg = '下拉刷新'
                            //刷新列表后，重新计算滚动区域高度
                            this.scroll.refresh();
                            this.scroll.finishPullDown();
                        },500)
                    } else {
                        if(!this.allLoad) this.pullupMsg = '上拉加载更多';
                        //刷新列表后，重新计算滚动区域高度
                        this.scroll.refresh();
                        this.scroll.finishPullUp();
                    }

                    this.$loading.end();
                })
            },
            getCate(){
                getCateList().then( res =>{
                    this.state_res = this.state_res.concat(res.state_list);
                    this.cate_res = this.cate_res.concat(res.cate_result);
                    this.dealtype_res = this.dealtype_res.concat(res.dealctype_list);
                })
            },
            clickSel(type,val,text){
                if( type == 'state' ){
                    this.s_state = val;
                    this.s_state_text = text
                } else if ( type == 'cate_id'){
                    this.s_cate = val;
                    this.s_cate_text = text
                } else {
                    this.s_deal_ctype = val;
                    this.s_deal_ctype_text = text
                }
                this.openSel = false;
                this.selType = '';
            },
            tagSearch(name){
                this.$refs.queryInput.value = name;
                this.query = name;
                this.isSearching = false;
            },
            getLocalHistory(){
                if(JSON.parse(localStorage.getItem('productQueryHistory')))
                {
                    this.localHistory = JSON.parse(localStorage.getItem('productQueryHistory'))
                    this.hasHistory = true
                }else{
                    this.hasHistory = false
                    this.localHistory = []
                }
            },
            removeHistory(){
                localStorage.removeItem('productQueryHistory')
                this.getLocalHistory();                
                Toast({
                      message: '删除成功!',
                      duration: 2000
                });
            },
            statusHandle(bt,nt,et,type,is_success){
                nt = nt ? nt : Date.parse(new Date())/1000;
                let r = '预约中';
                if(bt>nt){
                    r = '预热中';
                }
                else if(et<nt && et != 0){
                    if(is_success == 1){
                        r = '已成功'
                    } else {
                        r = '失败'
                    }
                } else {
                    if( type == 1){
                        r = '预约中'
                    }
                }
                return r;
            },
            statusHandle2(s,p){
                let r = '开放认购中';
                if(s == 0){
                    r = '预热中'
                } else {
                    if( p >= 100) {
                        r = '已成功'
                    } else {
                        if( s == 1){
                            r = '已成功'
                        } else if( s == 2) {
                            r = '已失败'
                        } else if( s == 3){
                            r = '开放认购中'
                        } else if( s == 4){
                            r = '长期项目'
                        }
                    }
                }
                return r;
            },
            back(){
                if (window.history.length <= 1) {
                    this.$router.push({path:'/index'})
                    return false
                } else {
                    this.$router.go(-1);
                    return;
                }
                //上面都没执行就说明卡在当前页不是最后一条， histroy记录数量大于1，又没有回退记录，只能返回首页，
                //如果上面都执行了 页面都跳走了，这个也就不用管了   
                setTimeout(() => {
                    this.$router.push({path:'/'})      
                },500)
            }
        }
    }

</script>
